<template>
  <ElementDialog
    ref="dialog"
    lock-scroll
    vertical-center
    :offset-top="-200"
    :visible="visible"
    embed
    title="提取"
    width="500px"
    v-on="$listeners">
    <FormHolder ref="form" :model="entity" label-width="0">
      <FormItem block required prop="advice" label="提取说明" hide-label>
        <ElInput v-model="entity.advice" type="textarea" :rows="5" placeholder="请输入提取说明" />
      </FormItem>
    </FormHolder>
    <template #footer>
      <ConfirmButton :confirmable="false" loadable type="primary" size="small" @click="withdraw">确定</ConfirmButton>
      <ElButton plain size="small" @click="() => $refs.dialog.hide()">取消</ElButton>
    </template>
  </ElementDialog>
</template>

<script>
  import { withdraw } from '@/api/admin/workitem'

  export default {
    name: 'FlowWithdrawDialog',
    props: {
      visible: Boolean,
      variables: Object,
      flowContext: Object,
      businessKey: String
    },
    data() {
      return {
        entity: {
          advice: ''
        }
      }
    },
    methods: {
      async withdraw() {
        await this.$refs.form.validate()
        const params = {
          businessKey: this.businessKey,
          variables: this.variables,
          taskId: this.flowContext.taskId,
          advice: this.entity.advice
        }

        const res = await withdraw(params)
        this.$emit('success', res)
        this.$refs.dialog.hide()
      }
    }
  }
</script>
